<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<style type="text/css">
			.done{
				color:green;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">ToList({{todos.length}})||({{total}})</h3>
				</div>
				<div class="panel-body">
					<ul class="list-group">
						<li :class="{done:item.completed}" class="list-group-item" v-for="(item,index) in todos">
							
							{{item.title}}{{item.completed}}
							
							<button :class="item.completed?'btn-success':'btn-danger'" class="btn btn-success pull-right btn-xs" @click="toggle(index)">
								{{item.completed?'已完成':'完成'}}
							</button>
							
							<button class="btn btn-info btn-xs pull-right" @click="del(index)">删除</button>
							
						</li>
						
					</ul>
					<input type="text" v-model="newData.title" class="form-control" name="" id="" />
					<input type="button" value="添加" @click="addData(newData)" class="btn btn-danger"/>
				</div>
				<div class="panel-footer">
					
				</div>
			</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					newData:{
						id:null,
						title:'',
						completed:false
					},
					todos:[
						{
							id:1,
							title:'去吃饭',
							completed:false
						},
						{
							id:2,
							title:'趴桌子睡觉',
							completed:false
						},
						{
							id:3,
							title:'做梦都会了',
							completed:false
						}
					]
				},
				methods:{
					addData(data){
							this.todos.push(data);
							this.newData = {
								id:null,
								title:'',
								completed:false
							}
						
					},
					toggle(index){
						console.log(index);
						this.todos[index].completed =!this.todos[index].completed
					},
					del(index){
						this.todos.splice(index,1);
					}
				},
				//计算属性
				computed:{
					total(){
						return this.todos.length;
					}
				}
			})
		</script>
	</body>
</html>
